<template>
    <div class="addrole-container">
        <div class="option-box">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限</el-breadcrumb-item>
                <el-breadcrumb-item>添加用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 表单数据 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="data-form" status-icon>
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="ruleForm.nickName" />
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="ruleForm.realName" />
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address" />
            </el-form-item>
            <el-form-item label="角色信息" prop="roleId">
                <el-select v-model="ruleForm.roleId" placeholder="请选择权限" @click="getRoleInputValue">
                    <el-option v-for="item in roleInputValue" :label="item.roleDesc" :value="item.roleId" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="goToList">回到列表</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { getAllRole } from "@/api/RoleApi";
import { addUser } from '@/api/UserApi';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';


// 路由导航
const router = useRouter();

/**
 * 要提交的数据
 */
let ruleForm = reactive({
    nickName: "",
    realName: "",
    phone: "",
    email: "",
    address: "",
    roleId: "",
})

// 权限数据存放地址
let roleInputValue: any = ref([]);

// ref值
const ruleFormRef = ref<FormInstance>()

const getRoleInputValue = async () => {
    await getAllRole().then(res => {
        roleInputValue.value = res.data;
    })
}



/**
 * 表单验证规则
 */
const rules = reactive<FormRules>({
    nickName: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        { min: 3, max: 30, message: '权限名称必须大于3字符，小于30字符！', trigger: 'blur' },
    ],
    realName: [
        { required: true, message: '请输入用户真实姓名', trigger: 'blur' },
        { min: 2, max: 30, message: '名称必须大于2字符，小于30字符！', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
    ],
    address: [
        { required: true, message: '请输入用户地址', trigger: 'blur' },
        { min: 3, max: 30, message: '名称必须大于5字符，小于255字符！', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '邮箱格式不正确', trigger: 'blur' }
    ],
    roleId: [
        {
            required: true,
            message: '请至少选择一个角色',
            trigger: 'change',
        },
    ]
})

/**
 * 提交表单信息
 * @param formEl 
 */
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return // 如果传入的数据为空,直接返回,不执行接下来的操作
    // 验证正则
    await formEl.validate((valid, fields) => {
        if (valid) {
            addUser(ruleForm).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success'
                    })
                    // 清空表数据
                    ruleForm = {
                        nickName: "",
                        realName: "",
                        phone: "",
                        email: "",
                        address: "",
                        roleId: "",
                    }
                } else {
                    ElMessage({
                        message: res.msg,
                        type: 'success'
                    })
                }
            })

        } else {
            ElMessage({
                message: "请按照要求完成信息的填写!",
                type: 'error'
            })
        }
    })
}

/**
 * 跳转到列表
 */
const goToList = () => {
    router.push('/user/list');
}

</script>
    
<style scoped lang="less">
.data-form {
    margin: 30px 0;
    width: 500px;
}

.option-box {
    margin: 5px 0;
}
</style>